<!DOCTYPE html>  
<html>  
<head>  
  <title>樱花树</title>  
  <style>  
    body {  
      background-color: #f0f0f0;  
      display: flex;  
      justify-content: center;  
      align-items: center;  
      height: 100vh;  
      margin: 0;  
    }  
  
    .cherry-tree {  
      position: relative;  
      width: 300px;  
      height: 500px;  
    }  
  
    .cherry-tree::before,  
    .cherry-tree::after {  
      content: '';  
      position: absolute;  
      width: 100%;  
      height: 100%;  
      border-radius: 50%;  
      background-color: #f8f8f8;  
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);  
    }  
  
    .cherry-tree::before {  
      top: 50px;  
      left: 50px;  
      width: 200px;  
      height: 300px;  
      border-radius: 50% 50% 0 0 / 60% 60% 0 0;  
    }  
  
    .cherry-tree::after {  
      top: 100px;  
      left: 100px;  
      width: 100px;  
      height: 200px;  
      border-radius: 50% 50% 0 0 / 70% 70% 0 0;  
    }  
  
    .cherry {  
      position: absolute;  
      background-color: pink;  
      border-radius: 50%;  
      width: 10px;  
      height: 10px;  
    }  
  
    .cherry:nth-child(odd) {  
      left: 100px;  
      animation: fall 3s infinite;  
    }  
  
    .cherry:nth-child(even) {  
      right: 100px;  
      animation: fall 3s 1s infinite;  
    }  
  
    @keyframes fall {  
      0% {  
        transform: translateY(-100px);  
        opacity: 1;  
      }  
      100% {  
        transform: translateY(500px);  
        opacity: 0;  
      }  
    }  
  </style>  
</head>  
<body>  
  <div class="cherry-tree">  
    <div class="cherry"></div>  
    <div class="cherry"></div>  
    <div class="cherry"></div>  
    <div class="cherry"></div>  
    <div class="cherry"></div>  
    <div class="cherry"></div>  
    <div class="cherry"></div>  
    <div class="cherry"></div>  
    <div class="cherry"></div>  
  </div>  
</body>  
</html>